<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ActionBar</title>
	<link rel="stylesheet" href="./css/iconfont.css">
	<link rel="stylesheet" href="./css/ActionBar.css"></head>

	<style>
		body{
			background: url(./images/bg.png) no-repeat;
		}
	</style>
<body >

	<div class="selectDate">
		<span class="iconfont icon-date dateIcon"></span>
		<span class="dateInput" id="test10" placeholder="请输入查询时间..."></span>
		<span class="dateBtn">查询</span>
	</div>

	<div class="actionBar">
		<ul>
			<li class="active">
				<span  class="iconfont icon-wind"></span>
				风场 <i class="iconfont icon-icon-up"></i>
				<ul class="selectDown">
					<li>
						<input class="GWT-radio" type="radio" name="windType" id="15">
						<label for="15">
							<span>100米</span>
						</label>
					</li>
					<li>
						<input class="GWT-radio" type="radio" name="windType" id="16">
						<label for="16">
							<span>1000米</span>
						</label>
					</li>
					<li>
						<input class="GWT-radio" checked type="radio" name="windType" id="17">
						<label for="17">
							<span>纯净</span>
						</label>
					</li>
				</ul>
			</li>
			<li>
				<span  class="iconfont icon-ziyuan1"></span>
				站点 <i class="iconfont icon-icon-up"></i>
				<ul class="selectDown">
					<li>
						<input class="GWT-checkbox" type="checkbox" name="site" id="18">
						<label for="18">
							<span>站点1</span>
						</label>
					</li>
					<li>
						<input class="GWT-checkbox" type="checkbox" name="site" id="19">
						<label for="19">
							<span>站点2</span>
						</label>
					</li>
					<li>
						<input class="GWT-checkbox" type="checkbox" checked name="site" id="20">
						<label for="20">
							<span>站点3</span>
						</label>
					</li>
				</ul>
			</li>
			<li>
				<span  class="iconfont icon-multilayer"></span>
				图层
				<i class="iconfont icon-icon-up"></i>
				<ul class="selectDown">
					<li>
						<input class="GWT-radio" type="radio" name="map" id="11">
						<label for="11">
							<span>地图</span>
						</label>
					</li>
					<li>
						<input class="GWT-radio" type="radio" name="map" id="12">
						<label for="12">
							<span>卫星</span>
						</label>
					</li>
					<li>
						<input class="GWT-radio" type="radio" name="map" id="13">
						<label for="13">
							<span>地图</span>
						</label>
					</li>
					<li>
						<input class="GWT-radio" type="radio" name="radio" id="14">
						<label for="14">
							<span>深夜</span>
						</label>
					</li>
				</ul>

			</li>
		</ul>
	</div>

	<script src="./js/jquery-1.10.2.js"></script>
	<script src="./js/laydate/laydate.js"></script>

<script>

//下拉
$('.actionBar ul li').hover(function() {
	 $(this).toggleClass('active');
	 $(this).find('i').toggleClass('icon-down-down');
   $(this).find('.selectDown').stop(true).slideToggle('2000');
});

//日期时间范围
 laydate.render({
  elem: '#test10'
  ,type: 'datetime'
  ,format:'yyyy-MM-dd HH'
  ,value:'2018-08-18 00 - 2018-09-14 00'
  ,range: true
  ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  }
}); 













    

    </script>

</body>
</html>